<template>
	<el-card>
		<!-- 搜索 -->
		<el-form :model="searchData" inline ref="searchFormRef" v-resize="searchResize" label-width="70px">
			<el-form-item label="产品名称" prop="goodsName">
				<el-input v-model="searchData.goodsName" placeholder="请输入产品名称" clearable></el-input>
			</el-form-item>
            <el-form-item label="产品描述" prop="goodsDesc">
				<el-input v-model="searchData.goodsDesc" placeholder="请输入产品描述" clearable></el-input>
			</el-form-item>
			
			
			<el-form-item>
				<el-button icon="el-icon-search" type="primary" @click="searchClick">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="resetClick">重置</el-button>
				<el-button icon="el-icon-plus" type="success" v-has="'sys:goods:add'" @click="addShowClick">新增</el-button>
			</el-form-item>
		</el-form>
		<!-- 表格渲染 -->
		<YwTable ref="tableRef" :searchData="searchData" :tableProps="tableProps" api="sysGoodsFindAllByPage">
			<el-table-column slot="table_oper" label="操作" fixed="right" width="170px">
				<template v-slot="scope">
						<el-button type="text" icon="el-icon-edit" @click="editShowClick(scope.row)"
							v-has="'sys:goods:edit'">修改</el-button>
						<el-button type="text" icon="el-icon-delete" @click="deleteClick(scope.row)"
							v-has="'sys:goods:delByIds'">删除</el-button>
				</template>
			</el-table-column>
		</YwTable>

		<!-- 添加/修改 -->
		<YwDialog @confirm="confirmClick" width="650px" ref="ywDialogRef" title="修改信息">
			<template slot="form">
				<el-form :model="curData" inline ref="curFormRef" label-width="95px" :show-message="false">
				
					<el-form-item label="产品名称" prop="goodsName" required>
						<el-input v-model="curData.goodsName" placeholder="请输入产品名称"></el-input>
					</el-form-item>
			
					<!-- <el-form-item label="产品图片" prop="goodsPicture" required>
						<el-input v-model="curData.goodsPicture" placeholder="请添加产品图片"></el-input>
					</el-form-item> -->
					
					<el-form-item label="产品图片" prop="goodsPicture" required>
						<YwUpload rootPath="sys/goods" v-model="curData.goodsPicture"></YwUpload>
					</el-form-item>
					

					<el-form-item label="产品价格" prop="goodsPrice" required>
						<el-input v-model="curData.goodsPrice" placeholder="请输入产品价格 "></el-input>
					</el-form-item>

                    <el-form-item label="产品描述" prop="goodsDesc" required>
						<el-input v-model="curData.goodsDesc" placeholder="请输入产品描述 "></el-input>
					</el-form-item>

                    <!-- <el-form-item label="产品类型" prop="goodsType" required>
						<el-input v-model="curData.goodsType" placeholder="请选择产品类型 "></el-input>
					</el-form-item> -->
					<el-form-item label="产品类型" prop="goodsType" required>
						<el-radio-group v-model="curData.goodsType">
							<el-radio v-for="dict in dict.type.goodsType" :key="dict.value" :label="dict.value">
								{{dict.label}}
							</el-radio>
						</el-radio-group>
					</el-form-item>

                    <el-form-item label="底片数量" prop="goodsNumber" >
						<el-input v-model="curData.goodsNumber" placeholder="请输入可以解锁的底片数量 "></el-input>
					</el-form-item>

                    <el-form-item label="入册数量" prop="goodsPutnumber" >
						<el-input v-model="curData.goodsPutnumber" placeholder="请输入入册数量 "></el-input>
					</el-form-item>

				</el-form>
			</template>
		</YwDialog>

	</el-card>
</template>

<script>
	export default {
		dicts: ["goodsType"],
		data() {
			return {
				//搜索条件
				searchData: {
                    goodsName: null,
					goodsDesc: null
				},
				//添加信息数据
				//修改信息数据
				//表单的值
				curData: {
                    goodsName: null,
                    goodsPrice: null,
                    goodsPicture: null,
                    goodsDesc: null,
                    goodsType: null,
                    goodsNumber: null,
                    goodsPutnumber: null

				},
				//表格数据
				tableProps: [
                    {
						label: "产品名称",
						prop: "goodsName"
					},
					{
						label: "产品价格",
						prop: "goodsPrice"
					},
				
					{
						label: "产品图片",
						prop: "goodsPicture",
						type: "pictures"
					},
                    {
						label: "产品描述",
						prop: "goodsDesc"
					},
                    // {
					// 	label: "产品类型",
					// 	prop: "goodsType"
					// },
					
					{
						label: "产品类型",
						prop: "goodsType",
						type: "tagDict",
						result: () => {
							return this.dict.type.goodsType
						}
					},
                    {
						label: "底片数量",
						prop: "goodsNumber"
					},
                    {
						label: "入册数量",
						prop: "goodsPutnumber"
					}
					

				],
				
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.$refs.tableRef.shuaxin(this.searchData)
			})

		},
		methods: {
			//搜索重置
			searchResize(data) {
				this.$refs.tableRef.refreshSize(data)
			},

			
			//添加/修改表单的确认按钮
			confirmClick() {
				let data = JSON.parse(JSON.stringify(this.curData))
                console.log(data)
				this.$refs.curFormRef.validate(async (valid) => {
					if (valid) {
						if (data.id) {
							//修改操作
							await this.$api.sysGoodsEdit(data)
						} else {
							//添加操作
							await this.$api.sysGoodsAdd(data);
						}
						this.$refs.ywDialogRef.close()
						this.searchClick()
					}
				});
			},
			//删除事件
			deleteClick(row) {
				this.$common.msgBoxDel(() => {
					this.$api.sysGoodsDelByIds(row.id).then(res => {
						this.searchClick();
					});
				})
			},
			//新增按钮
			addShowClick() {
				this.curData = {
					goodsName: null,
                    goodsPrice: null,
                    goodsPicture: null,
                    goodsDesc: null,
                    goodsType: null,
                    goodsNumber: null,
                    goodsPutnumber: null
				
				}
				this.$refs.ywDialogRef.open()
			},
			//修改按钮
			editShowClick(row) {
				//给表单赋值

				this.$api.sysGoodsFindById(row.id).then((result) => {
					this.curData = result;//实现表单赋值
				})	
				this.$refs.ywDialogRef.open()
			},

			//搜索按钮
			searchClick() {
				this.$refs.tableRef.shuaxin(this.searchData)
			},
			//重置按钮
			resetClick() {
				this.$refs.searchFormRef.resetFields();
				this.searchClick()
			},
		},
	};
</script>

<style lang="scss" scoped>
</style>
